<!-- 护理项目新增编辑弹窗 -->
<template>
    <div class="dialog-form">
        <t-dialog :visible="formVisible" :header="title + '护理项目'" :footer="false" :on-close="onClickCloseBtn">
            <template #body>
                <!-- 表单内容 -->
                <div class="dialogCenter">
                    <div class="dialogOverflow">
                        <t-form :data="formData" ref="form" :rules="rules" :label-width="110" @reset="onClickCloseBtn"
                            @submit="onSubmit">
                            <t-form-item label="护理项目名称：" name="name">
                                <t-input v-model="formData.name" class="wt-400" placeholder="请输入" clearable
                                    show-limit-number :maxlength="10">
                                </t-input>
                            </t-form-item>
                            <t-form-item label="价格：" name="price">
                                <t-input-number v-model="formData.price" :min="0" :step="10" placeholder="0.00"
                                    :decimal-places="2" @blur="textBlurPrice" @change="textBlurPrice"></t-input-number>
                            </t-form-item>
                            <t-form-item label="单位：" name="unit">
                                <t-input v-model="formData.unit" class="wt-400" placeholder="请输入" clearable
                                    show-limit-number :maxlength="5">
                                </t-input>
                            </t-form-item>
                            <t-form-item label="排序：" name="orderNo">
                                <t-input-number v-model="formData.orderNo" :min="minNumber" @blur="textBlurNo"
                                    @change="textBlurNo"></t-input-number>
                            </t-form-item>
                            <t-form-item label="状态：" name="status">
                                <t-radio-group v-model="formData.status">
                                    <t-radio v-for="(item, index) in statusData" :key="index" :value="item.id">{{
                                        item.value }}</t-radio>
                                </t-radio-group>
                            </t-form-item>
                            <t-form-item label="护理图片：" name="image">
                                <t-upload v-model="photoFile" action="api/common/upload" autoUpload="true" theme="image"
                                    :size-limit="sizeLimit" tips="图片大小不超过2M,仅支持上传PNG JPG JPEG类型图片" accept="image/*"
                                    :before-upload="beforeUpload" @remove="remove" @fail="handleFail"
                                    @success="handleSuccess"></t-upload>
                            </t-form-item>
                            <t-form-item label="护理项目描述：" name="nursingRequirement"><t-textarea
                                    v-model="formData.nursingRequirement" class="wt-400" placeholder="请输入"
                                    show-limit-number :maxlength="50">
                                </t-textarea>
                            </t-form-item>
                            <t-form-item class="dialog-footer">
                                <div>
                                    <button class="bt bt-grey wt-60" type="reset">取消</button>
                                    <button theme="primary" type="submit" class="bt wt-60">
                                        <span>确定</span>
                                    </button>
                                </div>
                            </t-form-item>
                        </t-form>
                    </div>
                </div>
            </template>
        </t-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { MessagePlugin, ValidateResultContext } from 'tdesign-vue-next'
//声明父组件传递过来的属性
const props = defineProps({
    // 控制dialog是否显示与隐藏
    formVisible: {
        type: Boolean,
        default: () => {
            return false;
        }
    },
    title: {
        type: String,
        default: () => {
            return '';
        }
    },
    data: {
        type: Object,
        default: () => {
            return {
                name: '',
                price: '',
                unit: '',
                orderNo: '',
                status: '',
                image: '',
                nursingRequirement: ''
            };
        }
    }
})

//声明父组件传递过来的方法
const emit = defineEmits(['dialogClose', 'dialogSave'])

//定义子组件自己的数据
const formData = ref({
    name: '',
    price: '',
    unit: '',
    orderNo: '',
    status: '',
    image: '',
    nursingRequirement: ''
})
// 需要把父组件传来的数据 赋值给 子组件的数据
watch(() => props.data, (newValue, oldValue) => {
    formData.value = newValue;
    if (newValue.image) {
        photoFile.value[0] = { url: newValue.image };
    }
});

//表单参数校验
const form = ref();
// 表单校验
const rules = {
    name: [
        // 名称校验
        {
            required: true,
            message: '护理项目名称为空，请输入护理项目名称',
            type: 'error',
            trigger: 'blur'
        }
    ],
    // 费用校验
    price: [
        {
            required: true,
            message: '价格为空，请输入价格',
            type: 'error',
            trigger: 'blur'
        },
        {
            validator: (val) => val >= 0.01,
            message: '价格为空，请输入价格',
            type: 'error',
            trigger: 'change'
        }
    ],
    // 单位
    unit: [
        {
            required: true,
            message: '单位为空，请输入单位',
            type: 'error',
            trigger: 'blur'
        }
    ],
    // 排序
    orderNo: [
        {
            required: true,
            message: '排序为空，请输入排序',
            type: 'error',
            trigger: 'blur'
        },
        {
            validator: (val) => val >= 1,
            message: '排序为空，请输入排序',
            type: 'error',
            trigger: 'change'
        }
    ],
    //   状态
    status: [
        {
            required: true,
            message: '状态为空，请选择状态',
            type: 'error',
            trigger: 'change'
        }
    ],
    // 护理图片
    image: [
        {
            required: true,
            message: '护理图片为空，请上传护理图片',
            type: 'error',
            trigger: 'change'
        }
    ],
    //   项目描述
    nursingRequirement: [
        {
            required: true,
            message: '护理项目描述为空，请输入护理项目描述',
            type: 'error',
            trigger: 'blur'
        }
    ]
}
// 文件上传
const photoFile = ref([])
const sizeLimit = ref({
    size: 2,
    unit: 'MB',
    message: '图片大小超过2m，请重新上传'
}) // 图片的大小限制
const beforeUpload = () => {

}
// 移除图片时将图片设置为默认图片
const remove = () => {
    photoFile.value = []
    formData.value.image = ''
}
// 上传图片失败
const handleFail = ({ file }) => {
    MessagePlugin.error(`图片 ${file.name} 上传失败`)
}
// 上传成功后触发。
const handleSuccess = (params) => {
    const url = params.response.data
    formData.value.image = url
    photoFile.value[0].url = url
}
// 
const statusData = ref([
    { id: 1, value: '启用' }, { id: 0, value: '禁用' },
])
const minNumber = ref(1)
//排序输入框回调，对排序的格式做校验
const textBlurNo = () => {
    let orderNo = formData.value.orderNo
    if (orderNo && orderNo < 1) {
        formData.value.orderNo = 1
    }
}
//价格输入框回调，对价格的格式做校验
const textBlurPrice = () => {
    let price = formData.value.price
    if (price && price < 0) {
        formData.value.price = 0.00;
    }
}
// 当点击了取消按钮触发
const onClickCloseBtn = () => {
    // 清空图片
    remove();
    // 清空表单的检验信息
    form.value.reset();
    emit('dialogClose')
}
// 表单提交触发
const onSubmit = (result) => {
    if (result.validateResult === true) {
        // 说明校验通过
        emit('dialogSave', formData.value);
    }
}



</script>